<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content {
            display: flex;
            justify-content: center;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!--    <script>-->
<!--        function addToCart(button) {-->
<!--            var discount = button.getAttribute('data-discount')-->

<!--            var discountBeanString = discount.substring(discount.indexOf("{"), discount.lastIndexOf("}") + 1);-->


<!--            var discountJson = JSON.parse( discountBeanString-->
<!--                .replace(/'/g, "\"") // 将所有单引号替换为双引号-->
<!--                .replace(/([a-zA-Z0-9]+)=/g, "\"$1\":") // 给所有属性名加上双引号-->
<!--                .replace(/([a-zA-Z0-9]+\.[a-zA-Z0-9]+)/g, "\"$1\"")); // 给所有属性值为浮点型的加上双引号-->
<!--            console.log(discountJson)-->

<!--            axios.post('/promotional/addToCart', {-->
<!--                params: {-->
<!--                    discount: discountJson-->
<!--                }-->
<!--            }, {-->
<!--                headers: {-->
<!--                    'Content-Type': 'application/json'-->
<!--                }-->
<!--            }).then(resp => {-->
<!--                console.log(resp.data)-->
<!--                if (resp.data=="OK"){-->
<!--                    alert("添加成功")-->
<!--                }-->
<!--            })-->
<!--        }-->
<!--        function back(){-->
<!--            alert("退回首页")-->
<!--        }-->
<!--    </script>-->
</head>
<body>
<div class="content">
    <table border="0" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品规格</th>
            <th>商品颜色</th>
            <th>促销价</th>
            <th>商品类型</th>
            <th>操作</th>
        </tr>
        <tr th:each="discount, iterStat:${listDiscount}" id="discountRow">
            <td th:text="${discount.id}"></td>
            <td th:text="${discount.shopId}"></td>
            <td th:text="${discount.shopName}"></td>
            <td th:text="${discount.size}"></td>
            <td th:text="${discount.color}"></td>
            <td th:text="${discount.origina*discount.discount}"></td>
            <td th:text="${discount.type}"></td>
            <td>
                <!--            <button type="button"  th:onclick="|javascript:addToCart('${discount.id}')|"  onclick="addToCart()">加入购物车</button>-->
                <!--            <button type="button" th:onclick="|javascript:addToCart('${discount.id}', '${discount.shopId}',-->
                <!--            '${discount.shopName}', '${discount.norms}', '${discount.origina}','${discount.discount}',-->
                <!--            '${discount.type}')|" onclick="addToCart()">加入购物车</button>-->
                <button type="button" th:data-discount="${discount}" onclick="addToCart(this)">加入购物车</button>

            </td>
        </tr>
    </table>

</div>
<button type="button" @click="back()">返回</button>

<script>
   new Vue({
       el: '#app',
    methods:{
        back(){
            alert("aaa")
        }
    }
    })
</script>
</body>

</html>